<template>
  <div style="width: 100%">
    <Checkbox
      v-if="showCheckAll"
      :indeterminate="indeterminate"
      :model-value="checkAll"
      @on-change="handleCheckAll"
    >
      <span class="checker-text"> 全选 </span>
    </Checkbox>
    <slot />
    <sp-spacer :y="0.5" />
    <CheckboxGroup v-model="checkFields" @on-change="checkAllGroupChange">
      <!-- eslint-disable-next-line vue/valid-v-for -->
      <Checkbox
        v-for="item of fieldsEnum"
        class="checker-selector"
        :label="item.code"
        border
        :disabled="computeDefault(item.value)"
      >
        {{ item.name }}
      </Checkbox>
    </CheckboxGroup>
  </div>
</template>

<script>
export default {
  name: 'exportFields.vue',
  props: {
    fieldsEnumName: {
      default: '',
      type: String
    },
    defaultCheck: {
      // 默认选中 且不可编辑
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [],
      type: Array
    },
    showCheckAll: {
      type: Boolean,
      default: true
    },
    isPlatform: Boolean
  },
  data () {
    return {
      checkAll: false,
      indeterminate: false,
      fieldsEnum: [],
      checkFields: []
    }
  },
  computed: {
    computeDefault () {
      return (val) => {
        if (this.defaultCheck.find(item => item === val)) { return true } else { return false }
      }
    }
  },
  mounted () {
    this.fieldsEnum = this.getEnums(this.fieldsEnumName)
    if (this.systemVersion !== 2 && this.fieldsEnumName === 'importStudentFieldsEnum') { this.fieldsEnum = this.fieldsEnum.filter(v => v.value !== 'inviter_phone') }
    if (this.isPlatform && this.fieldsEnumName === 'exportStudentFieldsEnum') { this.fieldsEnum = [...this.getEnums('PlatformExportStudentFieldsEnum'), ...this.fieldsEnum] }

    this.checkFields = []
    for (const item of this.defaultCheck) {
      const find = this.fieldsEnum.find(v => v.value === item)
      if (find) { this.checkFields.push(find.code) }
    }
    if (this.checkFields.length > 0) { this.indeterminate = true }
  },
  methods: {
    checkAllGroupChange (data) {
      if (data.length === this.fieldsEnum.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
      this.$emit('on-change')
    },
    handleCheckAll () {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        this.indeterminate = false
        this.checkFields = this.fieldsEnum.map(item => item.code)
      } else {
        this.indeterminate = true
        this.checkFields = []
        for (const item of this.defaultCheck) {
          const find = this.fieldsEnum.find(v => v.value === item)
          if (find) { this.checkFields.push(find.code) }
        }
      }
      this.$emit('on-check-all')
    },
    getData () {
      return this.checkFields
    }
  }
}
</script>
